<template>
  <div>
    <!-- 顶部面包屑 -->
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/about/office' }">高效办公</el-breadcrumb-item>
          <el-breadcrumb-item>审批</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户头像 -->
        <div class="demo-image__preview" style="margin-top:24px">
          <el-image
            style="width: 50px; height: 50px ; border-radius:25px"
            :src="url"
            :preview-src-list="srcList"
          >
            <img :src="url" alt="用户头像" />
          </el-image>
          <span>小明 | 前端工程师</span>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <el-row class="my-approvebtn">
      <el-button type="primary" @click="acheck" round>请假</el-button>
      <el-button type="success" @click="bcheck" round>加班</el-button>
      <el-button type="info" @click="ccheck" round>物品领用</el-button>
      <el-button type="warning" @click="dcheck" round>用车申请</el-button>
      <el-button type="danger" @click="echeck" round>报销</el-button>
    </el-row>
    <div v-if="flag==1">
      <qjapprove></qjapprove>
    </div>
    <div v-if="flag==2">
      <jbapprove></jbapprove>
    </div>
    <div v-if="flag==3">
      <goodsapprove></goodsapprove>
    </div>
    <div v-if="flag==4">
      <carapprove></carapprove>
    </div>
    <div v-if="flag==5">
      <bxapprove></bxapprove>
    </div>
  </div>
</template>

<script>
import qjapprove from "../../components/qjapprove/qjapprove.vue";
import jbapprove from "../../components/jbapprove/jbapprove.vue";
import goodsapprove from "../../components/goodsapprove/goodsapprove.vue";
import carapprove from "../../components/carapprove/carapprove.vue";
import bxapprove from "../../components/bxapprove/bxapprove.vue";

export default {
  name: "Approve",
  data() {
    return {
      flag:'1',
      approvearr: [], //接收后台返回需要审批的数据
      labelPosition: "right",
      dialogVisible: false, //模态框默认关闭
      input3: "",
      select: 1,
      currentPage: 1, //默认页码为1
      pagesize: 5, //默认一页显示5条
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      publicPath: process.env.BASE_URL,
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      activeName: "first",
      //   表格
      tableData1a: [
        {
          currentnode: "", //节点号
          leaveid: 20200001, //事项编号
          index: "1",
          addtime: "2020-09-02",
          department: "教学部", //申请部门
          username: "王小虎", //申请人
          systemid: "请假", //申请事项
          reasonleave: "家里有事处理 ", //事项说明
          // status: "已处理", //审批状态
          // result: "已通过", //审批结果
        },
        // {
        //   approveId: 20200002,

        //   addtime: "2020-08-08",
        //   department: "人事部", //申请部门
        //   username: "李明", //申请人
        //   matter: "招聘教师", //申请事项
        //   matterDescription: "需招聘两名外语讲师 ", //事项说明
        //   status: "待处理", //审批状态
        //   result: "", //审批结果
        // },
        // {
        //   approveId: 20200003,

        //   addtime: "2020-08-05",
        //   department: "教学部", //申请部门
        //   username: "张淑娟", //申请人
        //   matter: "报销", //申请事项
        //   matterDescription: "活动经费报销 ", //事项说明
        //   status: "已处理", //审批状态
        //   result: "已通过", //审批结果
        // },
        // {
        //   approveId: 20200004,

        //   addtime: "2020-07-02",
        //   department: "学生会", //申请部门
        //   username: "王晓明", //申请人
        //   matter: "费用申请", //申请事项
        //   matterDescription: "活动经费申请 ", //事项说明
        //   status: "已处理", //审批状态
        //   result: "已驳回", //审批结果
        // },
        // {
        //   approveId: 20200005,

        //   addtime: "2020-06-02",
        //   department: "研发部", //申请部门
        //   username: "黄天鸿", //申请人
        //   matter: "采购设备", //申请事项
        //   matterDescription: "实验室添加新的教学设备 ", //事项说明
        //   status: "待处理", //审批状态
        //   result: "", //审批结果
        // },
        // {
        //   approveId: 20200006,

        //   addtime: "2020-06-02",
        //   department: "研发部", //申请部门
        //   username: "小小", //申请人
        //   matter: "采购设备", //申请事项
        //   matterDescription: "实验室添加新的教学设备 ", //事项说明
        //   status: "待处理", //审批状态
        //   result: "", //审批结果
        // },
      ],
      tableData2a: [
        {
          currentnode: "", //节点号
          leaveid: 20200001, //事项编号
          index: "1",
          addtime: "2020-09-02",
          department: "教学部", //申请部门
          username: "王小虎", //申请人
          systemid: "请假", //申请事项
          reasonleave: "家里有事处理 ", //事项说明
          status: "待处理", //审批状态
        },
        {
          currentnode: "", //节点号
          leaveid: 20200001, //事项编号
          index: "1",
          addtime: "2020-09-02",
          department: "人事部", //申请部门
          username: "李明", //申请人
          systemid: "招聘教师", //申请事项
          reasonleave: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
      ],
      tableData3: [
        {
          date: "2020-09-02",
          department: "教学部", //申请部门
          name: "王小虎", //申请人
          matter: "请假", //申请事项
          matterDescription: "家里有事处理 ", //事项说明
          status: "已处理", //审批状态
          result: "已通过", //审批结果
        },
        {
          date: "2020-08-05",
          department: "教学部", //申请部门
          name: "张淑娟", //申请人
          matter: "报销", //申请事项
          matterDescription: "活动经费报销 ", //事项说明
          status: "已处理", //审批状态
          result: "已通过", //审批结果
        },
        {
          date: "2020-07-02",
          department: "学生会", //申请部门
          name: "王晓明", //申请人
          matter: "费用申请", //申请事项
          matterDescription: "活动经费申请 ", //事项说明
          status: "已处理", //审批状态
          result: "已驳回", //审批结果
        },
      ],
      tableData4: [
        {
          date: "2020-09-02",
          department: "教学部", //申请部门
          name: "王小虎", //申请人
          matter: "请假", //申请事项
          matterDescription: "家里有事处理 ", //事项说明
          status: "已处理", //审批状态
          result: "已通过", //审批结果
        },
        {
          date: "2020-08-08",
          department: "人事部", //申请部门
          name: "李明", //申请人
          matter: "招聘教师", //申请事项
          matterDescription: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
      ],
      tableData5: [
        {
          approveId: 20200001,
          date: "2020-09-02",
          department: "教学部", //申请部门
          name: "王小虎", //申请人
          matter: "请假", //申请事项
          matterDescription: "家里有事处理 ", //事项说明
          status: "已处理", //审批状态
          result: "已通过", //审批结果
        },
        {
          approveId: 20200002,
          date: "2020-08-08",
          department: "人事部", //申请部门
          name: "李明", //申请人
          matter: "招聘教师", //申请事项
          matterDescription: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
        {
          approveId: 20200003,
          date: "2020-08-08",
          department: "人事部", //申请部门
          name: "李明", //申请人
          matter: "招聘教师", //申请事项
          matterDescription: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
        {
          approveId: 20200004,
          date: "2020-09-02",
          department: "教学部", //申请部门
          name: "王小虎", //申请人
          matter: "请假", //申请事项
          matterDescription: "家里有事处理 ", //事项说明
          status: "已处理", //审批状态
          result: "已通过", //审批结果
        },
        {
          approveId: 20200005,
          date: "2020-08-08",
          department: "人事部", //申请部门
          name: "李明", //申请人
          matter: "招聘教师", //申请事项
          matterDescription: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
        {
          approveId: 20200006,
          date: "2020-08-08",
          department: "人事部", //申请部门
          name: "李明", //申请人
          matter: "招聘教师", //申请事项
          matterDescription: "需招聘两名外语讲师 ", //事项说明
          status: "待处理", //审批状态
          result: "", //审批结果
        },
      ],
      // 模态框
      formLabelAlign: {
        currentnode: "", //节点号
        leaveid: "", //事项编号
        addtime: "", //申请时间
        username: "", //申请人
        systemid: "", //申请事项
        userName1: "", //审批人
        remark: "", //审批建议
      },
    };
  },
  components: {
    qjapprove: qjapprove,
    jbapprove: jbapprove,
    goodsapprove: goodsapprove,
    carapprove: carapprove,
    bxapprove: bxapprove,
  },
  methods: {
    acheck(){
      this.flag = 1
    },
    bcheck(){
      this.flag = 2
    },
    ccheck(){
      this.flag = 3
    },
    dcheck(){
      this.flag = 4
    },
    echeck(){
      this.flag = 5
    },
    // 模态框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //一页显示多少条
    pxSizeChange(size) {
      this.pagesize = size;
    },
    // 显示当前页数
    pxCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 解决分页索引不改变
    indexMethod(index) {
      // console.log(index);
      return (this.currentPage - 1) * this.pagesize + index + 1;
    },
    // 表格
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleClick() {},
  },
  // 生命周期函数:页面loading完成请求后台数据
  created() {
    // 查询需要审批的请假单接口
  },
};
</script>

<style scoped lang="less">
.px-title {
  height: 50px;
  line-height: 50px;
  border: 1px solid gray;
}

.px-radius {
  padding: 10px;
  box-shadow: 0 0 1px gray;
  border-radius: 5px;
  box-shadow: 0 0 3px 1px #e4e4e4;
}
// 表格样式
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.my-fy {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}
.my-approvebtn{
   margin-bottom: 20px;
    padding: 20px;
   border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}
</style>